<template>
  <div class="kanban">
    <el-row gutter={20}>
      <!-- 项目总进度 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="progress-info">
            <div class="progress-percentage">{{ totalProjectProgress }}%</div>
            <div class="progress-label">项目总进度({{totalProjectNum}}个)</div>
          </div>
          <el-progress :percentage="totalProjectProgress" :stroke-width="15" class="progress" ><span/></el-progress>
        </el-card>
      </el-col>
      <!-- 总任务进度 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="progress-info">
            <div class="progress-percentage">{{ totalTaskProgress }}%</div>
            <div class="progress-label">总任务进度({{totalTaskNum}}项)</div>
          </div>
          <el-progress :percentage="totalTaskProgress" :stroke-width="15" :text-inside="true" class="this_progress" ></el-progress>
        </el-card>
      </el-col>

      <!-- 人员使用率 -->
      <el-col :span="6">
        <el-card class="box-card">
          <el-progress type="dashboard" :percentage="StaffUtilization" :status="progressStatus">
            <template #default="{ percentage }">
              <span class="circular_progress_value">{{ percentage }}%</span>
              <span class="circular_progress_label">人员利用率</span>
            </template>
          </el-progress>
        </el-card>
      </el-col>
      <!-- 交付预警 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div class="progress-info">
            <div class="progress-percentage">剩余{{ leftDaysOfLatestProject }}天</div>
            <div class="progress-label">交期({{dueDate}})</div>
            <span>交付预警({{projectName}})</span>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <el-row gutter={20}>
      <el-col :span="24">
        <div class="button-container" >
          <el-button @click="currentView = Overview" class="rounded-button">
            <el-icon>
              <component :is="ChatDotSquare" />
            </el-icon>
            项目概览
          </el-button>
          <el-button @click="currentView = Dashboard" class="rounded-button">
            <el-icon>
              <component :is="Platform" />
            </el-icon>
            数据大屏
          </el-button>
          <el-button @click="currentView = Charts" class="rounded-button">
            <el-icon>
              <component :is="View" />
            </el-icon>
            任务视图
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 动态组件区域 -->
    <component :is="currentView" />
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import {ChatDotSquare, Platform, View} from '@element-plus/icons-vue';

import Overview from './views/Overview.vue';
import Dashboard from './views/Dashboard.vue';
import Charts from './views/Charts.vue';
import { useUserStore } from '../../stores/UserStore'


const tenantId = useUserStore().userInfo.tenantId;


import {getDisplayProjectInfo} from "../../api/Report/projectData.ts";
import {ElMessage} from "element-plus";



//租户所有项目详情
const StaffUtilization=ref<any>()   //人员利用率
const totalProjectNum=ref<any>() //总项目数
const totalProjectProgress=ref<any>() //总项目进度
const totalTaskNum=ref<any>() //总任务数
const totalTaskProgress=ref<any>() //所有任务进度
const leftDaysOfLatestProject=ref<any>()  //最近一个项目剩余日期
const dueDate=ref<any>()  //最近一个项目的截止日期
const projectName=ref<any>() //截止的项目名

const getProjectInfoAsync=async ()=>{
  const res=await getDisplayProjectInfo(tenantId)
  if(res.latestProject==null){
    ElMessage.error("无数据")
    return
  }
  StaffUtilization.value=res.StaffUtilization.toFixed(2)
  totalProjectNum.value=res.totalProjectNum
  totalProjectProgress.value=res.totalProjectProgress.toFixed(2)
  totalTaskNum.value=res.totalTaskNum
  totalTaskProgress.value=res.totalTaskProgress.toFixed(2)
  leftDaysOfLatestProject.value=res.leftDaysOfLatestProject
  dueDate.value=res.latestProject.dueDate.replace('T',' ')
  projectName.value=res.latestProject.projectName
}
getProjectInfoAsync()






//进度条状态判断
// 绿色:'success',  黄色:'warning' ,  红色:'exception' , 蓝色: ''(空串)
const status=ref(['success','','warning','exception'])
const progressStatus = computed(() => {
  const index = Math.floor(StaffUtilization.value / 25);
  return status.value[index];
});


const currentView = ref(Overview);




</script>

<style scoped>

.man_hour_progress{


}

.circular_progress_value{
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.circular_progress_label{
  display: block;
  margin-top: 10px;
  font-size: 12px;
}


.kanban {
  background-color: #fff; /* 设置整个应用容器的背景色为白色 */
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  padding: 10px;
  background-color: #f5f5f5;
}

.card-body {

  padding: 10px;
}

.el-row {
  margin-bottom: 20px; /* 添加行间的间隔 */
}


.el-col {
  padding: 0 10px; /* 调整列内间隔 */
}


.box-card {
  height: 142px;
  border-radius: 8px;
}


.button-container button {
  width: 30%; /* 按钮宽度为 100% */
}
.button-container {
  display: flex;
  justify-content: space-between; /* 调整为space-between以便在两端留出空间 */
  align-items: center; /* 确保按钮和选择框垂直居中对齐 */
}

.rounded-button {
  border-radius: 15px; /* 设置按钮圆角 */
  height: 40px; /* 假设按钮的高度为40px，根据实际情况调整 */
  width: calc((100% - 200px) / 3); /* 三个按钮的总宽度减去选择框的宽度，然后平均分配 */
}




.box-card {
  background-color: #f0f8ff; /* 淡蓝色背景 */
  position: relative;
}

.progress-info {
  margin-bottom: 10px;
}

.progress-percentage {
  font-size: 2.3em; /* 字体大小 */
  font-family: '华文楷体', '楷体', '隶书', 'FZKaTong-M19', 'FZShuTi', sans-serif; /* 使用正楷字体 */

}


.progress-label {
  font-size: 1.3em;
  font-family: '华文楷体', sans-serif; /* 使用Roboto字体 */
  color: #666;
}

.progress {
  width: 125%; /* 你可以根据需要调整这个百分比或像素值 */
  margin: 0 auto; /* 居中进度条 */
  position: relative;
}

.this_progress{
  width: 100%;
  margin: 0 auto; /* 居中进度条 */
  position: relative;
}


</style>
